<!--
 * @Author: lixb
 * @Date: 2020-08-18 11:03:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-29 09:30:07
 * @Descripttion: 员工信息模块
-->
<template>
  <div class="app-container page-container">
    <el-card>
      <el-form ref="formInline" :inline="true" :model="formInline">
        <el-form-item label="关键词" prop="keyWord">
          <el-input v-model="formInline.keyWord" placeholder="请输入姓名/手机号"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <SelectTree
            ref="selectTree"
            :props="props"
            :options="orgTree"
            :value="formInline.deptId"
            :clearable="isClearable"
            :accordion="isAccordion"
            height="200"
            @getValue="getValue($event)"
          ></SelectTree>
        </el-form-item>
        <el-form-item label="岗位" prop="position">
          <el-input v-model="formInline.position" placeholder="请输入岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="useStatus">
          <el-select v-model="formInline.useStatus" placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <div v-show="showForm">
          <el-form-item :label="`${welfareName}余额`" class="balance">
            <el-input
              v-model.trim="formInline.minAmount"
              placeholder="最小值"
              @keyup.native="formInline.minAmount = isMoney(formInline.minAmount)"
            ></el-input>
            ~
            <el-input
              v-model.trim="formInline.maxAmount"
              placeholder="最大值"
              @keyup.native="formInline.maxAmount = isMoney(formInline.maxAmount)"
            ></el-input>
          </el-form-item>
          <el-form-item label="生日月份" prop="birthdayMonth">
            <el-select v-model="formInline.birthdayMonth" placeholder="请选择月份">
              <el-option
                v-for="item in monthList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职月份" prop="entryMonth">
            <el-select v-model="formInline.entryMonth" placeholder="请选择月份">
              <el-option
                v-for="item in monthList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="未填写信息" prop="notFillIn">
            <el-select v-model="formInline.notFillIn" placeholder="请选择">
              <el-option
                v-for="item in notFillinList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button @click="isShowForm()">{{ showForm ? '收起' : '展开' }}</el-button>
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card style="margin-top: 15px;">
      <Table
        :table-data="tableData"
        :prop-data="propData"
        border
        :paging-data="pagingData"
        :table-height="tableHeight"
        @getTableList="getTableList"
      >
        <template slot="useStatus">
          <el-table-column prop="useStatus" width="50px" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.useStatus == 0 ? '在职' : '离职' }}</span>
            </template>
          </el-table-column>
        </template>
        <template slot="amout">
          <el-table-column prop="amout" :label="`${welfareName}余额`">
            <template slot-scope="scope">
              <span>{{ scope.row.amout }}</span>
            </template>
          </el-table-column>
        </template>
        <template slot="op">
          <el-table-column fixed="right" width="250px" label="操作">
            <template slot-scope="scope">
              <el-button type="text" class="el-icon-view" @click="handleClick(scope.row, 'detail')">
                查看详情
              </el-button>
              <wf-el-auth-button
                type="text"
                auth-key="WALFARE-YGXXCX-HSXXK"
                class="el-icon-refresh"
                @click="handleClick(scope.row, 'recover')"
              >
                回收{{ welfareName }}
              </wf-el-auth-button>
            </template>
          </el-table-column>
        </template>
      </Table>
    </el-card>
    <!-- 查看详情组件 -->
    <Detail
      :is-open-detail="isOpenDetail"
      :staff-info="staffInfo"
      @closeDrawer="closeDrawer"
    ></Detail>
    <!-- 回收薪享卡组件 -->
    <Recover
      :is-open-recover="isOpenRecover"
      :recover-info="recoverInfo"
      @closeDrawer="closeDrawer"
    ></Recover>
  </div>
</template>

<script>
  import { getLocalData } from '@/utils/localStore';
  import Table from '@/components/Table';
  import Detail from './components/Detail';
  import Recover from './components/RecoverySalaryCard';
  import { getStaffList } from '@/api/staff';
  import { mapGetters } from 'vuex';
  import SelectTree from '@/components/selectTree/index.vue';
  export default {
    components: { Table, Detail, Recover, SelectTree },

    data() {
      return {
        isClearable: false, // 可清空（可选）
        isAccordion: true, // 可收起（可选）
        props: {
          // 配置项（必选）
          value: 'id',
          label: 'deptName',
          children: 'organizationTreeVo',
          // disabled:true
        },
        // 选项列表（必选）
        showForm: false,
        tableHeight: null,
        totalCount: '12',
        isOpenDetail: false,
        isOpenRecover: false,
        staffInfo: {},
        recoverInfo: {},
        pagingData: {
          total: null,
          current: 1,
          size: 10,
        },
        tableData: [],
        propData: [
          {
            prop: 'jobNumber',
            label: '工号',
            width: '100px',
          },
          {
            prop: 'realName',
            label: '姓名',
          },
          {
            prop: 'deptName',
            label: '部门',
          },
          {
            prop: 'position',
            label: '岗位',
          },
          {
            prop: 'useStatus',
            label: '状态',
            type: 'useStatus',
          },
          {
            prop: 'mobilePhone',
            label: '手机号',
            width: '120px',
          },
          {
            prop: 'gender',
            label: '性别',
          },
          {
            prop: 'birthday',
            label: '生日',
          },
          {
            prop: 'entryTime',
            label: '入职日期',
          },
          {
            prop: 'amout',
            label: `余额`,
            type: 'amout',
          },
          {
            prop: 'op',
            label: '操作',
            type: 'op',
          },
        ],
        formInline: {
          deptId: -1,
          keyWord: '',
          maxAmount: null,
          minAmount: null,
          organizationId: '',
          position: '',
          useStatus: -1,
          notFillIn: -1,
          birthdayMonth: null,
          entryMonth: null,
        },
        departmentList: [],
        statusList: [
          {
            label: '全部',
            value: -1,
          },
          {
            label: '在职',
            value: 0,
          },
          {
            label: '离职',
            value: 1,
          },
        ],
        notFillinList: [
          {
            label: '全部',
            value: -1,
          },
          {
            label: '生日日期',
            value: 0,
          },
          {
            label: '入职日期',
            value: 1,
          },
          {
            label: '工号',
            value: 2,
          },
        ],
        monthList: [
          { label: '全部', value: -1 },
          { label: '1月', value: 1 },
          { label: '2月', value: 2 },
          { label: '3月', value: 3 },
          { label: '4月', value: 4 },
          { label: '5月', value: 5 },
          { label: '6月', value: 6 },
          { label: '7月', value: 7 },
          { label: '8月', value: 8 },
          { label: '9月', value: 9 },
          { label: '10月', value: 10 },
          { label: '11月', value: 11 },
          { label: '12月', value: 12 },
        ],
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      ...mapGetters('organization', ['orgTree']),
      welfareName() {
        return getLocalData('welfareName');
      },
    },
    activated() {
      this.getTableList(this.pagingData);
    },
    methods: {
      queryList() {
        this.pagingData.current = 1;
        this.getTableList(this.pagingData);
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-21 16:36:35
       * @msg: 获取员工信息列表
       */
      getTableList(val) {
        let params = this.formInline;
        params.maxAmount = params.maxAmount;
        params.minAmount = params.minAmount;
        params.size = val.size;
        params.current = val.current;
        params.organizationId = this.userInfo.organId;
        getStaffList(params).then(res => {
          this.tableData = res.data.records;
          this.pagingData.total = res.data.total;
        });
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-21 17:29:59
       * @msg: 重置按钮
       */
      resetForm() {
        this.$refs.formInline.resetFields();
        this.formInline.minAmount = null;
        this.formInline.maxAmount = null;
        this.$refs.selectTree.valueTitle = '';
      },
      // 取值
      getValue(value) {
        this.formInline.deptId = value;
      },
      handleClick(row, flag) {
        if (flag == 'detail') {
          this.isOpenDetail = true;
          this.staffInfo = row;
        } else {
          this.isOpenRecover = true;
          this.recoverInfo = row;
        }
      },
      closeDrawer(close) {
        this.isOpenDetail = close;
        this.isOpenRecover = close;
      },
      isShowForm() {
        this.showForm = !this.showForm;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .balance {
    .el-input {
      width: 140px;
    }
  }
</style>
